<div class="panel panel-default">
    <div class="panel-heading">
       <div class="row">
            <div class="col-md-12">
                <div class="pull-left" >
                      <b><span translate>Temperatures</span></b>
                </div>
                <div class="pull-right">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="autocheck_temperature" onclick="on_autocheck_temperature()"/>
                                    <span  translate>auto-check every:</span>
                                </label>
                                <div class="input-group">
                                <input class='form-control w4'  type="number"  min="1" max="99" id="tempInterval_check" onchange="onTempIntervalChange()" />
                                <span  class='input-group-addon'  translate>sec</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body panel-height-temp">
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th translate>Name</th>
                    <th translate>Options</th>
                    <th translate nowrap>Value | Target</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td class="col-lg-3 col-md-3" translate>Heater T0</td>
                <td class="col-lg-6">
                     <div class="form-inline">
                        <div class="form-group">
                            <button onclick="temperature_heatOff('T0')" class="btn btn-primary">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M550 1200h100q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM800 975v166q167 -62 272 -209.5t105 -331.5q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5 t-184.5 123t-123 184.5t-45.5 224q0 184 105 331.5t272 209.5v-166q-103 -55 -165 -155t-62 -220q0 -116 57 -214.5t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5q0 120 -62 220t-165 155z' />
                                    </g>
                                </svg>
                            </button>&nbsp;&nbsp;
                            <div class="input-group">
                                <input class='form-control w5' type="number" min="0" max="999"  id="heaterT0SelectedTemp" value=0 onkeyup="temperature_handleKeyUp(event, 'T0')" />
                                <span class='input-group-addon' translate>&deg;C</span>&nbsp;&nbsp;
                            </div>
                            <button onclick="temperature_heatSet('T0')" class="btn btn-danger">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M465 477l571 571q8 8 18 8t17 -8l177 -177q8 -7 8 -17t-8 -18l-783 -784q-7 -8 -17.5 -8t-17.5 8l-384 384q-8 8 -8 18t8 17l177 177q7 8 17 8t18 -8l171 -171q7 -7 18 -7t18 7z' />
                                    </g>
                                </svg>
                            </button>
                        </div>
                    </div>
                </td>
                <td class="col-lg-3"><span class="tempDisplay text-nowrap" id="heaterT0DisplayTemp"></span><span  id="heaterT0TargetTemp_anime" class="loader-pulse pull-right hide_it" style="color:red"></span></td>
            </tr>
            <tr id="temperature_secondExtruder" class="hide_it">
                <td translate>Heater T1</td>
                <td>
                     <div class="form-inline">
                        <div class="form-group">
                            <button onclick="temperature_heatOff('T1')" class="btn btn-primary">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M550 1200h100q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM800 975v166q167 -62 272 -209.5t105 -331.5q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5 t-184.5 123t-123 184.5t-45.5 224q0 184 105 331.5t272 209.5v-166q-103 -55 -165 -155t-62 -220q0 -116 57 -214.5t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5q0 120 -62 220t-165 155z' />
                                    </g>
                                </svg>
                            </button>&nbsp;&nbsp;
                             <div class="input-group">
                                <input class='form-control w5'  type="number" min="0" max="999"  id="heaterT1SelectedTemp" value=0 onkeyup="temperature_handleKeyUp(event, 'T1')" />
                                <span class='input-group-addon' translate>&deg;C</span>&nbsp;&nbsp;
                            </div>
                            <button onclick="temperature_heatSet('T1')" class="btn btn-danger">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M465 477l571 571q8 8 18 8t17 -8l177 -177q8 -7 8 -17t-8 -18l-783 -784q-7 -8 -17.5 -8t-17.5 8l-384 384q-8 8 -8 18t8 17l177 177q7 8 17 8t18 -8l171 -171q7 -7 18 -7t18 7z' />
                                    </g>
                                </svg>
                            </button>
                        </div>
                    </div>
                </td>
                <td><span class="tempDisplay text-nowrap" id="heaterT1DisplayTemp"></span><span id="heaterT1TargetTemp_anime"  class="hide_it loader-pulse pull-right" style="color:red"></span></td>
            </tr>
            <tr>
                <td translate>Bed</td>
                <td>
                     <div class="form-inline">
                        <div class="form-group">
                            <button onclick="temperature_heatOff('bed')" class="btn btn-primary">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M550 1200h100q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM800 975v166q167 -62 272 -209.5t105 -331.5q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5 t-184.5 123t-123 184.5t-45.5 224q0 184 105 331.5t272 209.5v-166q-103 -55 -165 -155t-62 -220q0 -116 57 -214.5t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5q0 120 -62 220t-165 155z' />
                                    </g>
                                </svg>
                            </button>&nbsp;&nbsp;
                            <div class="input-group">
                                <input class='form-control w5'  type="number" min="0" max="999" id="bedSelectedTemp" value=0 onkeyup="temperature_handleKeyUp(event, 'bed')" />
                                <span class='input-group-addon' translate>&deg;C</span>&nbsp;&nbsp;
                            </div>
                            <button onclick="temperature_heatSet('bed')" class="btn btn-danger">
                                <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                    <g transform='translate(50,1200) scale(1, -1)'>
                                        <path  fill='currentColor' d='M465 477l571 571q8 8 18 8t17 -8l177 -177q8 -7 8 -17t-8 -18l-783 -784q-7 -8 -17.5 -8t-17.5 8l-384 384q-8 8 -8 18t8 17l177 177q7 8 17 8t18 -8l171 -171q7 -7 18 -7t18 7z' />
                                    </g>
                                </svg>
                            </button>
                        </div>
                    </div>
                </td>
                <td><span class="tempDisplay text-nowrap" id="bedDisplayTemp"></span><span id="bedTargetTemp_anime" class="hide_it loader-pulse pull-right" style="color:red"></span></td>
            </tr>
            </tbody>
        </table>
         <ul class="list-group" >
            <li class='list-group-item hide_it'  id="temperatures_output">
                <div class='row'>
                    <div class='col-md-6'>
                     <canvas id="extruderTempgraph" height="130"  width="200"></canvas>
                     &nbsp;&nbsp;
                    </div> 
                    <div class='col-md-6'>
                    <canvas id="bedTempgraph" height="130"  width="200" ></canvas>
                    </div> 
                </div>
            </li>
        </ul>  
   </div>
</div>
